<template>
  <div>
    <van-nav-bar
      class="top"
      title="订单详情"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="sale_list">
      <ul>
        <li v-for="(item, index) in info.get_goods" :key="index">
          <div class="sale_left">
            <img :src="item.img" alt="" />
            <div>
              <h2>{{ item.goods_name }}</h2>
              <!-- <p>￥50</p> -->
              <small
                >{{ item.price }}元 {{ item.get_name.type == 2 ? "共" : "x" }}
                {{ item.sum }}包</small
              >
            </div>
          </div>
          <div class="sale_rigth">
            <p>￥{{ item.total_price }}</p>
            <!-- <p>￥{{item.price * item.sum}}</p> -->
          </div>
        </li>
        <li>
          <h5>包数：</h5>
          <h2>
            <p>{{ info.sum }}包</p>
          </h2>
        </li>
        <li>
          <h5>邮费：</h5>
          <h2>
            <p>￥{{ info.postage }}</p>
          </h2>
        </li>
        <li>
          <h5>总计：</h5>
          <h2>
            <p>￥{{ info.price }}</p>
          </h2>
        </li>
      </ul>
    </div>
    <!-- 收货人信息 -->
    <div class="consignee">
      <ul>
        <li>
          <h5>收货人</h5>
          <input
            type="text"
            placeholder="请输入收货人姓名"
            v-model="info.consignee"
            disabled
          />
        </li>
        <li>
          <h5>联系方式</h5>
          <input
            type="text"
            placeholder="请输入收货人联系方式"
            v-model="info.phone"
            disabled
          />
        </li>
        <li>
          <h5>收货地址</h5>
          <div class="ord">
            <!-- <input type="text" class="input" @click.prevent="address" v-model="info.province+info.city+info.area" :disabled="flag"> <br> -->
            <input type="text" v-model="address_detail" disabled />
          </div>
        </li>
        <li>
          <h5>选择快递</h5>
          <input
            type="text"
            class="input"
            @click="express"
            v-model="info.log_type"
            disabled
          />
          <br />
        </li>
        <li>
          <h5>备注</h5>
          <input type="text" placeholder="" v-model="info.log_name" disabled />
          <br />
        </li>
      </ul>
    </div>
    <!-- 收货人信息end -->
    <!-- 弹出收货人地址 -->
    <van-popup v-model="show" position="bottom" :overlay="true">
      <van-area :area-list="areaList" @confirm="ok" @cancel="no" />
    </van-popup>
    <!-- 弹出快递选择 -->
    <van-popup v-model="isshow" position="bottom" :overlay="true">
      <van-picker :columns="columns" @change="onChange" />
    </van-popup>
    <!-- 总经销确认修改信息 -->
    <div v-if="flag">
      <div class="bottom_bto" @click="changeAddress">修改收货信息</div>
      <div class="bottom_bto" @click="changeGoodsInfo">修改商品信息</div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { NavBar, Popup, Picker, Area, Toast } from "vant";
import area from "./../../assets/js/area.js";
Vue.use(NavBar).use(Popup).use(Picker).use(Area);
export default {
  data() {
    return {
      name: "", //收货人姓名
      name_tel: "", //收货人联系电话
      detail_drs: "", //收货人详细地址
      show: false,
      isshow: false,
      value: "",
      values: "",
      columns: ["普通快递", "顺丰快递", "顺丰空运", "无需快递"],
      areaList: area,
      info: [],
      flag: false,
      fromIndex: null,
    };
  },
  computed: {
    address_detail() {
      // return this.info.province+this.info.city+this.info.area+this.info.address_deta
      return this.info.address_deta;
    },
  },
  methods: {
    // 判断是从sub跳转过来的还是tab跳转过来的
    onClickLeft() {
      if (
        localStorage.getItem("ordFlag") &&
        JSON.parse(localStorage.getItem("ordFlag")).flag == true
      ) {
        this.$router.push(
          `/tab/${JSON.parse(localStorage.getItem("ordFlag")).index}`
        );
      } else if (
        localStorage.getItem("ordFlag") &&
        JSON.parse(localStorage.getItem("ordFlag")).flag == false
      ) {
        this.$router.push(
          `/sub/${JSON.parse(localStorage.getItem("ordFlag")).index}`
        );
      } else {
        this.$router.go(-1);
      }
    },
    // 地址选择
    address() {
      this.show = true;
    },
    express() {
      this.isshow = true;
    },
    onChange(picker, value, index) {
      (this.value = value), (this.isshow = false);
    },
    log_name() {
      this.isshow = true;
    },
    ok(value) {
      // console.log(1)
      this.show = false;
      // this.values=value
      // console.log(value.code)
      var list = "";

      value.forEach((item) => {
        list += item.name + " ";
        //  console.log(item.name);
        //  list+=item.name
      });
      this.values = list;
    },
    no() {
      // console.log(2)
      this.show = false;
    },
    //修改地址
    changeAddress() {
      this.$router.push({
        path: "/changeaddress",
        query: {
          order_id: this.info.id,
          //   address_deta :this.info.province+" "+this.info.city+" "+this.info.area+this.info.address_deta,
          address_deta: this.info.address_deta,
          consignee: this.info.consignee,
          phone: this.info.phone,
        },
      });
    },
    //修改商品
    changeGoodsInfo() {
      let goods_info = [];
      this.info.get_goods.forEach((item) => {
        const num =
          item.get_name.type == 2 ? item.sum / item.get_name.p_quite : item.sum;
        goods_info.push({
          id: item.goods_id,
          num,
        });
      });
      localStorage.setItem("goods_info", JSON.stringify(goods_info));
      // console.log(this.info);
      const goods_address = {
        address_deta: this.info.address_deta,
        area_code: this.info.area_code,
        city_code: this.info.city_code,
        province_code: this.info.province_code,
        consignee: this.info.consignee,
        phone: this.info.phone,
        log_name: this.info.log_name,
        log_type: this.info.log_type,
      };
      localStorage.setItem("request_info", JSON.stringify(goods_address));
      this.$router.push({
        path: `/shop/${this.info.user_id}`,
        query: {
          order_no: this.info.order_no,
        },
      });
    },
  },
  beforeRouteEnter(to, from, next) {
    // 判断路由进入位置
    next((vm) => {
      // if(from.path.indexOf("/tab") == 0){
      //    vm.fromIndex = 1
      // }
      // else
      if (from.params.index == 0) {
        vm.fromIndex = 0;
      } else if (from.path == "/submit") {
        vm.fromIndex = 0;
      } else if (from.path == "/changeaddress") {
        vm.fromIndex = 0;
      } else if (from.path.indexOf("/shop") != -1) {
        vm.fromIndex = 0;
      }
    });
  },
  mounted() {
    // console.log(this.$route);
    // console.log(this.$route.query.ordFlag);
    if (this.$route.query.ordFlag != undefined) {
      // 判断是我的订单还是分销订单 我的订单ordFlag为true，分销为false
      localStorage.setItem(
        "ordFlag",
        JSON.stringify({
          index: this.$route.query.index,
          flag: this.$route.query.ordFlag,
        })
      );
    }

    //是否为总经销，显示修改按钮
    if (this.fromIndex == 0 || this.$route.path == "changeaddress") {
      const isGeneralAgent = localStorage.getItem("isGeneralAgent");
      if (isGeneralAgent && isGeneralAgent == "true") {
        this.flag = true;
      }
    }
    this.apiPost("AuditOrder/order_details", {
      token: localStorage.getItem("token"),
      order_no: this.$route.params.id,
    }).then((res) => {
      console.log(1111, res.data.data);
      this.info = res.data.data;
    });
  },
};
</script>
<style scoped>
.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.sale_list {
  top: -12.267vw;
  background-color: #fff;
  padding: 0 0.5em;
  margin: 12.267vw 0 0.5em 0;
}
.sale_list h4 {
  font-size: 0.9em;
  text-align: left;
  margin: 0 0.5em;
  border-bottom: 1px solid #f4f4f4;
  padding: 0.3em 0;
}
.sale_list h5 {
  display: flex;
  align-items: center;
  margin: 0 0.5em;
}
.sale_list ul li {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom: 1px solid #f4f4f4;
  padding: 0.5em 0;
}
.sale_list ul li .sale_left {
  display: flex;
  flex-direction: row;
}
.sale_list ul li img {
  display: block;
  width: 4em;
  height: 4em;
  background-color: #ccc;
  margin: 0 0.5em;
}
.sale_list ul li h2 {
  font-weight: normal;
  font-size: 1.2em;
}
.sale_list ul li p {
  color: #b43e3a;
  font-size: 0.9em;
}
.sale_list ul li div {
  text-align: left;
}
.sale_list small {
  color: #ccc;
}
.sale_left div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sale_rigth {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.consignee ul li {
  display: flex;
  padding: 1em 1.5em;
  background-color: #fff;
  border-bottom: 1px solid #f4f4f4;
}
.consignee ul li h5 {
  flex: 1;
  text-align: left;
  display: flex;
  font-size: 1.2;
  /* justify-content: center;
     */
  align-items: center;
}
.consignee ul li input {
  flex: 4;
  vertical-align: middle;
  border-style: none;
  border-bottom: 1px solid #f4f4f4;
  font-size: 0.9em;
}
.consignee ul li .ord {
  flex: 4;
  width: 100%;
}
.consignee ul li .ord h5 {
  flex: 1;
  text-align: left;
  display: flex;
  font-size: 1.2;
  flex-basis: top;
}
.consignee ul li .ord input {
  width: 100%;
  padding: 0.5em 0;
  background-color: white;
}

button {
  border-style: none;
  background-color: #b43e3a;
  color: white;
  width: 80%;
  border-radius: 2em;
  padding: 0.5em;
  margin: 2em 0;
}
button,
input,
textarea {
  background-color: white;
}
.bottom_bto {
  background-color: #b43e3a;
  height: 10.667vw;
  width: 80vw;
  border-radius: 5.333vw;
  text-align: center;
  line-height: 10.667vw;
  color: rgb(255, 255, 255);
  margin: 5.333vw auto;
}
</style>
